import React from 'react';

import SwiperCore, { Pagination } from 'swiper';
import { Swiper, SwiperSlide } from "swiper/react";

import { SliderContainer } from './sliderStyle';

// Import Swiper styles
import 'swiper/swiper.min.css';
import 'swiper/components/pagination/pagination.min.css';

interface Props extends csc.Props {
  bannerList?: { imageUrl: string }[]
}

SwiperCore.use([Pagination]);

function Slider(props: Props) {
  const { bannerList } = props;

  return (
    <SliderContainer>
      <div className="slider-container" >
        <Swiper
          pagination
          loop
          className="swiper-wrapper"
        >
          {
            bannerList?.map((slider, index) => {
              return (
                <SwiperSlide className="swiper-slider" key={slider.imageUrl + index} >
                  <div className="slider-nav" >
                    <img src={slider.imageUrl} width="100%" height="100%" alt="推荐图片" />
                  </div>
                </SwiperSlide>
              );
            })
          }
        </Swiper>
      </div>
    </SliderContainer>
  );
}

export default Slider;


